<template>
  <section class="todoapp">
    <hm-header @addList="addList"></hm-header>
    <hm-main
      :list="renderList"
      @changeFlag="changeFlag"
      @delList="delList"
      @changeAll="changeAll"
    ></hm-main>
    <hm-footer
      :sum="sum"
      :showClearBtn="showClearBtn"
      @isAll="isAll"
      :type="type"
      @changeType="changeType"
    ></hm-footer>
  </section>
</template>

<script>
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter,
  },
  data() {
    return {
      // 这个list是原始的，完整的数据，给子组件传的数据，没必要是完整的数据
      // // 给用户展示的，只需要是过滤后的数据即可 showList
      // list: JSON.parse(localStorage.getItem('todoList')) || [],
      // type: 'all' // 过滤条件
      list:  JSON.parse(localStorage.getItem('list'))|| [
        { id: 1, value: '吃饭', flag: false },
        { id: 2, value: '睡觉', flag: true },
        { id: 3, value: '打豆豆', flag: false },
      ],
      type: 'all',
    }
  },
  computed: {
    renderList() {
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter((item) => !item.flag)
        case 'completed':
          return this.list.filter((item) => item.flag)
        default:
          return this.list
      }
    },

    sum() {
      return this.list.filter((item) => !item.flag).length
    },

    showClearBtn() {
      return this.list.some((item) => item.flag)
    },
  },
  methods: {
    changeAll (flag) {
      // 让list中的所有的任务，和flag同步
      this.liat=this.list.forEach(item => item.flag = flag)
    },
    // handleDel (id) {
    //   // console.log('子传父，传递了 id', id)
    //   // 过滤
    //   this.list = this.list.filter(item => item.id !== id)
    // },
    // handleAdd (value) {
    //   // 往数组的最前面，添加一项  更新视图 => 修改数据
    //   this.list.unshift({
    //     id: +new Date(),
    //     name: value,
    //     flag: false
    //   })
    // },
    // handleChangeState (flag, id) {
    //   // 根据 id 找到数组中的对应项，进行更新 find
    //   const obj = this.list.find(item => item.id === id)
    //   obj.flag = flag
    // },
    // handleClear () {
    //   // 保留所有未完成的
    //   this.list = this.list.filter(item => item.flag === false)
    // },
// changeAll(flag){
//    this.list.forEach(item => item.flag= flag)

// },


    changeType(type) {
      this.type = type
    },

    addList(value) {
      this.list = [{ id: +new Date(), value: value, flag: false }, ...this.list]
    },

    changeFlag(flag, id) {
      // if (this.target.id === id) {

      // }
      this.list.forEach((item) => {
        if (item.id === id) {
          item.flag = flag
        }
      })
    },
    delList(id) {
      const event = this.list.find((item) => item.id === id)
      if (!event.flag) return alert('未完成，不要删')
      this.list = this.list.filter((item) => item.id !== id)
    },

    isAll() {
      this.list = this.list.filter((item) => !item.flag)
    },


  },
  watch: {

    list: {
      immediate: true,
      deep: true,
      handler(newVal) {
        localStorage.setItem('list',JSON.stringify(newVal))
      },
    },
  },
}
</script>

<style></style>
